<template>
  <div class="chartsBox">
    <div id="lineId"></div>
    <ul class="num">
      <li>一级服务水平</li>
      <li>二级服务水平</li>
      <li>三级服务水平</li>
      <li>四级服务水平</li>
      <li>五级服务水平</li>
      <li>六级服务水平</li>
    </ul>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return { option: null };
  },
  props: {
    chartData: Object,
  },
  watch: {
    chartData: {
      handler(newVal) {
        this.initStr();
      },
      deep: true,
    },
  },
  mounted() {
    this.initStr();
  },
  methods: {
    initStr() {
      this.option = {
        xAxis: {
          type: "category",
          // boundaryGap: false,
          // 调整X轴文字方向
          axisLabel: { interval: 0, fontSize: 15},
          data: this.chartData.xAxisData
        },
        grid: {
                    left: '8%',
                    right: '0%',
                    bottom: '3%',
                    containLabel: true
                },
        visualMap: {
          min: 1,
          max: 6,
          dimension: 1,
          orient: "vertical",
          right: 10,
          top: "center",
          calculable: true,
          inRange: {
            color: ["green", "orange", "red"],
          },
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   },
          // formatter: (params) => {
          //   console.log(params[0].value);
          //    params.forEach((item)=>{
          //     if (item.value < 1) {
          //       if (item.value == 0) {
          //         return 0;
          //       } else {
          //         return (item.value / (1 / 0.35)).toFixed(3) ;
          //       }
          //     }
          //     if (item.value > 1 && item.value < 2) {
          //       return  ((item.value - 1) / 5 + 0.35).toFixed(3) ;
          //     }
          //     if (item.value > 2 && item.value < 3) {
          //       return  ((item.value - 2) / 5 + 0.55).toFixed(3);
          //     }
          //     if (item.value > 3 && item.value < 4) {
          //       return  ((item.value - 3) / (1 / 15) / 100 + 0.75) ;
          //     }
          //     if (item.value > 4 && item.value < 5) {
          //       return  ((item.value - 4) / 10 + 0.9).toFixed(3)  ;
          //     }
          //     if (item.value > 5) {
          //       return  ((item.value - 5)).toFixed(3) ;
          //     }
          //    })
          //   }
          // },
          yAxis: {
            type: "value",
            max: 6,
            min: 0,
            axisLine: {
              show: true, // 控制x轴线是否显示
              lineStyle: {
                width: 1, // x轴线宽度
                type: "solid", // x轴线类型，可以是 'solid', 'dashed', 或 'dotted'
              },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  'rgba(255, 255, 255, 0.1)',
                  'rgba(204, 204, 204, 0.1)',
                  'rgba(255, 255, 255, 0.1)',
                  'rgba(204, 204, 204, 0.1)',
                  'rgba(255, 255, 255, 0.1)',
                  'rgba(204, 204, 204, 0.1)',
                ]
              }
            },
            // 删除 axisLabel 显示刻度
            axisLabel: {
              show: false,
            },
            // 0.35 0.55 0.75 0.9 1
          },

          series: this.chartData.data
        };
        this.initBar(this.option);
      },
        initBar(option) {
          var element = document.getElementById('lineId');
            if (element) {
                let id = echarts.init(element);
                id.setOption(this.option);
                window.addEventListener("resize", id.resize);
            }

        // let id = echarts.init(document.getElementById("lineId"));
        // console.log(this.option, 'linelevel');
        // id.setOption(this.option);
        // window.addEventListener("resize", id.resize);
      },

    }
  };
</script>

<style>
.chartsBox {
  position: relative;
}

.num {
  list-style: none;
}

.num :nth-child(1) {
  position: absolute;
  left: 45px;
  bottom: 70px;
}

.num :nth-child(2) {
  position: absolute;
  left: 45px;
  bottom: 155px;
}

.num :nth-child(3) {
  position: absolute;
  left: 45px;
  bottom: 230px;
}

.num :nth-child(4) {
  position: absolute;
  left: 45px;
  bottom: 305px;
}

.num :nth-child(5) {
  position: absolute;
  left: 45px;
  bottom: 380px;
}

.num :nth-child(6) {
  position: absolute;
  left: 45px;
  bottom: 455px;
}

#lineId {
  height: 570px;
}
</style>